import { _decorator, Component, Node, Label, Button, find, v3, Vec3 } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { StageInfo } from '../../game/basic';
import { udm } from '../../../../scripts/managers/UserDataManager';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { ProgressBar } from 'cc';
import { lm } from '../../LobbyManager';
import { forkJoin, Observable } from 'rxjs';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

@ccclass('StageChestPanel')
export class StageChestPanel extends BasePanel {

    stageInfo = ReactiveProperty.Create<StageInfo>(null);

    @property(Node)
    mainNode: Node = null;

    @property(Label)
    contentLabel: Label = null;

    @property(Button)
    closeButton: Button = null;

    @property({ type: ProgressBar })
    progressData: ProgressBar = null

    willBind(): void {
        // this.adaptive();
        this.mainNode.setScale(.5, .5, .5);
    }

    useObserves() {
        return [
            this.stageInfo.subscribe(this.refresh.bind(this)),
            BindButton(this.closeButton).subscribe(this.closeButtonClicked.bind(this)),
        ];
    }

    // adaptive() {
    //     this.mainNode.setScale(v3(Vec3.ONE).multiplyScalar(lm.getAdaptiveScale()));
    // }

    openPanelAnim(): Observable<any> {
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 255 }, { easing: 'expoOut' }),
            TweenToStart(this.mainNode, .4, { scale: lm.getAdaptiveScaleV3() }, { easing: 'backOut' }),
        ]);
    }

    closePanelAnim(): Observable<any> {
        this.ensureUIOpacity();
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 0 }, { easing: 'expoIn' }),
            TweenToStart(this.mainNode, .2, { scale: v3(.5, .5, .5) }, { easing: 'backIn' }),
        ]);
    }


    refresh() {
        if (this.stageInfo.value == null) return;
        let { chestCurValue, chestMaxValue, flag } = udm.checkStageChestProgress(this.stageInfo.value.stageId, false);
        // this.contentLabel.string = `Stage Chest Progress: ${chestCurValue} / ${chestMaxValue}`;
        this.contentLabel.string = `${chestCurValue} / ${chestMaxValue}`;
        this.progressData.progress = chestCurValue / chestMaxValue;
    }

    closeButtonClicked() {
        StageChestPanel.CloseProcess(null, 'close');
    }

}

